import { readFileSync } from 'fs-extra';
import { join } from 'path';
import Vue from 'vue/dist/vue';
import { ValueType, PropType } from "./action";

export const ActionHead = Vue.component("action-head", {
    props: {
        open: Boolean,
        title: String,
        actionProp: {
            type: Object,
            default: () => { return {} }
        },
    },
    template: readFileSync(join(__dirname, '../../../static/template/vue/actionHead.html'), 'utf-8'),
    data() {
        return {
            propType: {},
            propTypeKeyOnly: Object.keys(PropType).filter((v) => isNaN(parseInt(v))),
            valueType: {},
            valueTypeKeyOnly: Object.keys(ValueType).filter((v) => isNaN(parseInt(v))),
        }
    },
    mounted() {
        this.onActionChange();
    },
    watch: {
        actionProp: function () {
            this.onActionChange();
        }
    },
    methods: {
        onValueTypeChange: function () {
            let value = parseInt((this.$refs.valueTypeSelect as any).value);
            this.$emit("onValueTypeChange", value);
        },
        onPropTypeChange: function () {
            let value = parseInt((this.$refs.propTypeSelect as any).value);
            this.$emit("onPropTypeChange", value);
        },
        onOpenChange: function () {
            let open = (this.$refs.checkboxOpen as any).value;
            this.$emit("onOpenChange", open);
        },
        onActionChange: function () {
            this.propType = this.actionProp.type;
            this.valueType = this.actionProp.valueType;
        }
    },
})